<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>常用入口编辑</title>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body class="layui-layout-body" >
<div class="layui-layout layui-layout-admin">

<div class="layui-body">
	
	<blockquote class="layui-elem-quote" th:text="${msg}" th:style="'color: green;display:' + (${msg} == null ? 'none' : 'block')"></blockquote>
	
	<form class="layui-form" th:action="@{/index_page/entrance/save}" method="post">
		<input type="hidden" name="id" th:value="${entrance == null} ? '' : ${entrance.id}">
		<div class="layui-form-item">
      		<label class="layui-form-label"><span style="color: red;">*</span>名称</label>
      		<div class="layui-input-inline">
      			<input id="name" name="name" class="layui-input" type="text" placeholder="请输入" autocomplete="off" 
      				lay-verify="required|name" maxlength="4"
      				th:value="${entrance == null} ? '' : ${entrance.name}">
      			<div class="layui-input-inline layui-form-mid layui-word-aux">
			    	请输入2～4个字
			    </div>
     		</div>
  		</div>
  		<div class="layui-form-item">
		    <label class="layui-form-label"><span style="color: red;">*</span>排序权重</label>
		    <div class="layui-input-inline">
		      	<input name="sort" class="layui-input" type="text" placeholder="请输入数字" autocomplete="off" 
		      		lay-verify="required|entranceSort" th:value="${entrance} == null ? '1' : ${entrance.sort}">
		    </div>
		    <div class="layui-input-inline layui-form-mid layui-word-aux">
		    	请输入1～9999的整数
		    </div>
	  	</div>
  		<div class="layui-form-item">
      		<label class="layui-form-label"><span style="color: red;">*</span>跳转方式</label>
      		<div class="layui-input-inline">
    			<select id="gotoMethod" name="gotoMethod" lay-filter="gotoMethod">
    				<option th:each="gotoMethod : ${gotoMethods}" th:value="${gotoMethod.id}" th:text="${gotoMethod.name}"	
    					th:selected="${entrance == null} ? ${gotoMethod.id == 0} : ${entrance.gotoMethod == gotoMethod.id}"></option>
       			</select>
     		</div>
  		</div>
  		<div id="urlDiv" class="layui-form-item">
      		<label class="layui-form-label"><span style="color: red;">*</span>跳转地址</label>
      		<div class="layui-input-inline">
      			<input name="url" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="gotoUrl"
      				th:value="${entrance == null} ? '' : ${entrance.url}">
     		</div>
  		</div>
  		<div id="appIdDiv" class="layui-form-item">
      		<label class="layui-form-label"><span style="color: red;">*</span>开发者平台App ID</label>
      		<div class="layui-input-inline">
      			<input name="appId" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="gotoAppId"
      				th:value="${entrance == null} ? '' : ${entrance.appId}">
     		</div>
  		</div>
  		<div id="cardDiv" class="layui-form-item">
      		<label class="layui-form-label"><span style="color: red;">*</span>帖子ID</label>
      		<div class="layui-input-inline">
      			<input name="cardId" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="gotoCard"
      				th:value="${entrance == null} ? '' : ${entrance.cardId}">
     		</div>
  		</div>
  		<div id="groupFeedDiv" class="layui-form-item">
      		<label class="layui-form-label"><span style="color: red;">*</span>小组的feedId</label>
      		<div class="layui-input-inline">
      			<input name="groupFeedId" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="gotoGroupFeed"
      				th:value="${entrance == null} ? '' : ${entrance.groupFeedId}">
     		</div>
  		</div>
  		<div id="groupChatDiv" class="layui-form-item">
      		<label class="layui-form-label"><span style="color: red;">*</span>群聊ID</label>
      		<div class="layui-input-inline">
      			<input name="groupChatId" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="gotoGroupChat"
      				th:value="${entrance == null} ? '' : ${entrance.groupChatId}">
     		</div>
  		</div>
		<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
      			<a th:href="@{/index_page/entrance/list}"  class="layui-btn">取消</a>
    		</div>
  		</div>
	</form>
	
	<div style="height: 70px"></div>
</div>
  
</div>
<script th:src="@{/layui/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script>
$(document).ready(function(){ 
	$(".layui-body").css({"left": "10px","top": "10px"});
}); 
//一般直接写在一个js文件中
var form;
layui.use(['layer', 'form'], function(){
	var layer = layui.layer;
	form = layui.form;

	form.verify({
		name: function(value, item) {
			if(value.length < 2 || value.length > 4)
				return '限制2～4字';
		}
		, entranceSort: function(value, item) {
			var patrn = /^[1-9][0-9]{0,3}$/;
		  	if (!patrn.test(value)) {
		  		return '请输入1～9999的整数';
		  	}
		}
		, gotoUrl: function(value, item) {
			if($("#gotoMethod").val() == 0 || $("#gotoMethod").val() == 1) {
				if(value == null || value.length == 0)
					return '必填项不能为空';
			}
		}
		, gotoAppId: function(value, item) {
			if($("#gotoMethod").val() == 1) {
				if(value == null || value.length == 0)
					return '必填项不能为空';
			}
		}
		, gotoCard: function(value, item) {
			if($("#gotoMethod").val() == 2) {
				if(value == null || value.length == 0)
					return '必填项不能为空';
			}
		}
		, gotoGroupFeed: function(value, item) {
			if($("#gotoMethod").val() == 2 || $("#gotoMethod").val() == 4) {
				if(value == null || value.length == 0)
					return '必填项不能为空';
			}
		}
		, gotoGroupChat: function(value, item) {
			if($("#gotoMethod").val() == 5) {
				if(value == null || value.length == 0)
					return '必填项不能为空';
			}
		}
	});
	
	form.on('select(gotoMethod)', showGotoData);
	showGotoData();
});
function showGotoData() {
	$("#urlDiv").hide();
	$("#appIdDiv").hide();
	$("#cardDiv").hide();
	$("#groupFeedDiv").hide();
	$("#groupChatDiv").hide();
	if($("#gotoMethod").val() == 0) {
 		$("#urlDiv").show();
 	} else if($("#gotoMethod").val() == 1) {
 		$("#urlDiv").show();
 		$("#appIdDiv").show();
 	} else if($("#gotoMethod").val() == 2) {
 		$("#cardDiv").show();
 		$("#groupFeedDiv").show();
 	} else if($("#gotoMethod").val() == 3) {
 		//  不做任何处理
	} else if($("#gotoMethod").val() == 4) {
		$("#groupFeedDiv").show();
	} else if($("#gotoMethod").val() == 5) {
		$("#groupChatDiv").show();
	}
}
</script>
</body>
</html>